//导航栏整体定位div
div.posRoot{
	position: fixed;
	width: 100%;
	z-index: 100;
}

// 顶部导航栏设置
.hfWarp{
	min-width: 1000px;
	
	.hfContent{
		width: 1000px;
		margin: 0 auto;
	}
}
$contentImg : url(../../source/imgs/icon.png) no-repeat;
#headerWarp1{
	background: #25292e;
	
	#navRoot{
		height: 56px;
		
		#iconDiv{
			margin-top: 9px;
			width: 95px;
			height: 38px;
			float: left;
			background : $contentImg 0 0;
			
			a{
				display: block;
				height: 100%;
			}
		}
		
		ul{
			float: right;
			height: 100%;
			
			li{
				float: left;
				height: 100%;
				position: relative;
				
				&:hover{
					
					a{
						color: #ccc;
					}
				}
				
				a{
					display: block;
					padding: 0 15px;
					color: #525961;
					line-height: 56px;
				}
				
				
				&.navLine{
					height: 8px;
					background: #525961;
					width: 1px;
					margin-top: 25px;
				}
				
				&.NavLogin{
					
					a{
						float: left;
						padding: 0;
						color: #ccc;
					}
					
					a.loginA1{
						margin-right: 8px;
					}
					
					a.loginA2{
						padding-right: 15px;
					}
				}
				
				&.addPapers>a{
					padding-right: 0;
				}
				
				&.NavShopCar{
					
					&:hover{
						background: #3f4449;
						
						div.NSCdisplay{
							display: block;
							
						}
					}
					
					div.NSCdisplay{
						width: 309px;
						left: 15px;
						background: #3f4449;
						position: absolute;
						z-index: 100;
						display: none;
						
						div.ShopCarGoodsDiv{
							height: 70px;
							line-height: 70px;
							text-align: center;
							color: #ccc;
						}
						
						a.robBtn{
							display: block;
							line-height: 50px;
							text-align: center;
							color: #fff;
							background: #7dbfde;
							font-size: 14px;
						}
					}
						
				}
				
				&.NavMessage{
					position: relative;
					
					&:hover{
						background: #3f4449;
						
						div.messageListRoot{
							display: block;
						}
					}
					
					div.messageListRoot{
						position: absolute;
						width: 190px;
						left: -68px;
						background: #3f4449;
						z-index: 100;
						display: none;
						
						a{
							display: block;
							color: #ccc;
							border-top: #525961 solid 1px;
							
							&:hover{
								background: #878787;
							}
							
							&.listRootA1{
								border: none;
							}
							
							span{
								display: block;
								line-height: 43px;
								
								
								small{
									float: right;
								}
							}
						}
					}
				}
			}
		}
	}
}
//上部选择条以及搜索栏
#headerWarp2>div.hfContent{
	height: 45px;
	border-bottom: 4px solid #ccc;
	background: white;
	position: relative;
	
	&>ul.selectRoot{
		height: 100%;
		float: left;
		// width: 734px;
		font-size: 15px;
	
		
		&>li{
			height: 100%;
			float: left;
			width: 121px;
			margin-right: 43px;
			padding-bottom: 4px;
			
			
			&>a{
				color: #333;
				display: block;
				height: 100%;
				text-align: center;
				line-height: 45px;
			}
			
			&>div.bottomLine{
				height: 4px;
				background: #25292e;
				display: none;
				// line-height: 0;
			}
			
			&.homeTap{
				width: 118px;
				margin: 0;
				
				a{
					text-align: left;
				}
			}
			
			&.supermanTap{
				margin: 0;
			}
			
			&.shopTap:hover{
				
				div.navExtend{
					display: block;
				}
			}
			
			&:hover{
				// border-bottom: 4px solid #25292e;
				div.bottomLine{
					display: block;
				}
				
			}
		}
	}
	
	&>div.searchRoot{
		float: right;
		width: 260px;
		height: 100%;
		position: relative;
		
		
		a{
			position: absolute;
			top:4px;
			right: 13px;
			width: 33px;
			height: 38px;
			background: $contentImg -167px -147px;
		}
		
		div.inputRoot{
			position: absolute;
			height: 100%;
			border-bottom: 4px solid #25292e;
			right: 0;
			width: 0;
			font-size: 0;
			line-height: 45px;
			overflow: hidden;
			
			input{
				border: none;
				height: 30px;
				width: 188px;
				margin-left: 8px;
				vertical-align: middle;
				font-size: 13px;
				color: #25292e;
				// font-family: 'Hiragino Sans GB','冬青黑体','Hiragino Kaku Gothic ProN','Microsoft Yahei' ,'Simsun','Arial', 'Helvetica', 'sans-serif';
				
			}
		}
		
		
	}
	
}
//点击商品弹出栏
#headerWarp2 li.shopTap div.navExtend{
	background :white;
	width: 1000px;
	display: none;
	position: absolute;
	left: 0;
}
#headerWarp2 li.shopTap div.navExtend #extendContent{
	
	// margin: 0 auto;
	background: white;
	
	div.extendLeftZone{
		float: left;
		padding-top: 16px;
	}
	
	ul.extendRoot{
		width: 750px;
		position: relative;
		
		&.extendRootEx:hover{
			margin-bottom: 90px;
		}
		
		li{
			width: 107px;
			height: 85px;
			float: left;
			margin-right: 0;
			font-size: 12px;
			
			&:hover{
				
				div.interItemRoot{
					display: block;
				}
				
				div.iconDiv div.delta{
					display: block;
				}
			}
			
			div.iconDiv{
				width: 40px;
				height: 100%;
				position: relative;
				
				
				
				img{
					width: 40px;
					height: 40px;
					padding-top: 20px;
				}
				
				h5{
					font-weight:600;
					font-size: 14px;
					text-align: center;
					color: #4d4d4d;
					margin-top: -3px;
				}
				
				div.delta{
					position: absolute;
					bottom: -4px;left: 16px;
					width: 7px;
					height: 7px;
					display: none;
					background: white;
					z-index: 10;
					border: 1px solid black;
					border-right: none;
					border-bottom: none;
					transform: rotate(45deg);
					-ms-transform: rotate(45deg);		/* IE 9 */
					-webkit-transform: rotate(45deg);	/* Safari and Chrome */
					-o-transform: rotate(45deg);		/* Opera */
					-moz-transform: rotate(45deg);		/* Firefox */
				}
			}
			
			
			
			
			div.interItemRoot{
				width: 680px;
				position: absolute;
				left: 0;
				display: none;
				padding-top: 10px;
				padding-bottom: 10px;
				// z-index: 1000;
				border-top: 1px solid black;
				
				span{
					float: left;
					width: 107px;
					padding-top: 10px;
					
				}
			}
		}
	}
	
	//底部按钮
	div.bottomAllBtnRoot{
		padding: 130px 0 30px;
		
		a,span{
			font-size: 12px;
			letter-spacing: 1px;
			color: rgb(102, 102, 102);
			font-weight:400px;
		}
		
		a{
			margin-right: 6px;
		}
		
		span{
			margin-right: 60px;
		}
	}
	
	//右边杂志
	div.magazineRoot{
		width: 232px;
		height: 271px;
		margin-top: 42px;
		float: right;
		
		img{
			width: 100%;
		}
		
		p{
			padding-top: 15px;
			line-height: 24px;
			color: #4d4d4d;
			font-size: 14px;
			letter-spacing: 2px;
		}
	}
	
}
//商店招牌
// 商店
#footerShopRoot{
	border-top: 1px solid #ededed;
	background: #fbfdfe;
}
#footerShopRoot>div.hfContent{
	height: 118px;
	padding: 51px 0 78px;
	
	a.shopBtn{
		display: block;
		margin: 0 auto;
		height: 16px;
		width: 177px;
		padding-left: 45px;
		background: $contentImg 45px -417px;
		position: relative;
		
		span.shopHand{
			position: absolute;
			left: 0; top: 0;
			width: 27px;
			height: 100%;
			background: $contentImg -173px -356px;;
		}
	}
	
	div.shopItemsRoot{
		height: 60px;
		padding-top: 42px;
		
		&>dl{
			float: left;
			height: 100%;
			
			dt,dd{
				float: left;
				height: 100%;
			}
			
			dt{
				background: $contentImg;
			}
			
			dd{
				padding: 9px 0 0 20px;
			}
			
			h5{
				line-height: 24px;
				color: #737373;
				font-size: 14px;
			}
			
			p{
				line-height: 22px;
				letter-spacing: 1.2px;
				color: #ccc;
				font-size: 100%;
			}
			
			&.shopItem1{
				width: 261px;
				
				dt{
					width: 56px;
					background-position:0 -355px;
				}
			}
			
			&.shopItem2{
				width: 272px;
				
				dt{
					width: 45px;
					background-position:-153px -217px;
				}
			}
			
			&.shopItem3{
				width: 252px;
				
				dt{
					width: 55px;
					background-position:-57px -353px;
				}
			}
			
			&.shopItem4{
				// width: 252px;
				
				dt{
					width: 57px;
					background-position:-114px -353px;
				}
				
				h5{
					height: 24px;
					background: $contentImg 0 -434px;
					width: 100%;
				}
			}
		}
	}
}

//底部

#footerRoot{
	background: #25292e;
}

#footerRoot>div.hfContent{
	color: #5c5c5c;
	height: 221px;
	
	div.bottomTopRoot{
		padding-top: 40px;
		
		a.appBtn{
			float: left;
			padding-left: 60px;
			font-size: 14px;
			background: $contentImg -175px 0;
			position: relative;
			letter-spacing: 2px;
			
			&:hover{
				color: #bfbfbf;
				
				div.appDownloadRoot{
					display: block;
				}
			}
			
			h4{
				line-height: 19px;
			}
			
			p{
				line-height: 18px;
				padding-top: 7px;
			}
			
			div.appDownloadRoot{
				height: 187px;
				width: 237px;
				float: left;
				background: transparent;
				position: absolute;
				left: 0; top: -187px;
				display: none;
				
				dd{
					line-height: 52px;
					color: #4d4d4d;
					text-align: center;
					font-size: 13px;
					letter-spacing: 0;
					
				}
				
				
				
				dl.iPhoneDl{
					float: left;
					background: white;
					
					dt{
						width: 98px;
						height: 95px;
						padding-right: 20px;
						border-right: 1px solid #d9d9d9;
						background: $contentImg -101px -48px;
					}
					
					dd{
						padding-right: 20px;
					}
					
					
					
				}
				
				dl.AndroidDl{
					float: left;
					padding-left: 20px;
					background: white;
					
					dt{
						width: 98px;
						height: 95px;
						
						background: $contentImg 0 -48px;
					}
					
					
				}
			}
		}
		
		ul.shareRoot{
			padding-top: 5px;
			float: right;
			height: 30px;
			
			li{
				height: 100%;
				float: left;
				margin-left: 27px;
				
				a{
					display: block;
					height: 20px;
					background: $contentImg;
					
					&.wechat{
						width: 25px;
						background-position: -100px -1px;
						position: relative;
						
						&:hover{
							background-position: -100px -24px;
							
							div.shareWechatRoot{
								display: block;
							}
						}
						
						div.shareWechatRoot{
							width: 145px;
							height: 190px;
							background: transparent;
							position: absolute;
							bottom: 100%; left: -60px;
							display: none;
							
							div.wechatCode{
								height: 145px;
								background: $contentImg 0 -148px;
							}
						}
					}
					
					&.weibo{
						width: 23px;
						background-position: -150px 0;
						
						&:hover{
							background-position: -150px -23px;
						}
					}
					
					&.dou{
						width: 18px;
						background-position: -129px 0;
						
						&:hover{
							background-position: -129px -25px;
						}
					}
				}
			}
			
		}
	}
	// 底部列表
	ul.bottomList{
		height: 14px;
		padding-top: 29px;
		margin-bottom: 9px;
		
		li{
			line-height: 14px;
			font-size: 12px;
			float: left;
			padding: 0 9px 0 10px;
			background: $contentImg -197px -189px;
			letter-spacing: 3px;
			
			&.first{
				padding-left: 0;
				background: none;
			}
			
			a{
				color: #5c5c5c;
				
				&:hover{
					color: #bfbfbf;
				}
			}
			
			
		}
	}
	
	p.bottomInfo{
		line-height: 17px;
		letter-spacing: 3px;
	}
}